<template>
    <div class="dai">
        <div class="cont">
            <div class="abb">
                <h1>仓库信息</h1>
                <div class="nmb">
                    <div class="nmbs">
                        盘点ID:<el-input v-model="filters.id" clearable @change="loadwarehouses"></el-input>
                    </div>
                    <div class="nmbs">
                        选择该盘点单号:<el-input v-model="filters.countcode" clearable @change="loadwarehouses"></el-input>
                    </div>
                    <div class="nmbs">
                        选择该仓库ID:<el-input v-model="filters.warehouseid" clearable @change="loadwarehouses"></el-input>
                        <el-button @click="resfrom">重置</el-button>
                    </div>
                </div>
            </div>
            <div class="a">
                <el-col>
                    <el-button :icon="CirclePlus" @click="insert">添加</el-button>
                </el-col>
            </div>
            <div>
                <el-table :data="tabos" border>
                    <el-table-column label="盘点ID" prop="id">
                        <template #default="scope">
                            <span class="clickable-id" @click="openDetails(scope.row.id)">
                                {{ scope.row.id }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="盘点单号" prop="countcode"></el-table-column>
                    <el-table-column label="盘点名称" prop="countname"></el-table-column>
                    <el-table-column label="仓库ID" prop="warehouseid"></el-table-column>
                    <el-table-column label="盘点类型" prop="counttype"></el-table-column>
                    <el-table-column label="计划开始时间" prop="plannedStarttime"></el-table-column>
                    <el-table-column label="实际开始时间" prop="actualStarttime"></el-table-column>
                    <el-table-column label="实际结束时间" prop="actualendtime"></el-table-column>
                    <el-table-column label="状态" prop="status"></el-table-column>
                    <el-table-column label="创建者" prop="createby"></el-table-column>
                    <el-table-column label="创建时间" prop="createtime"></el-table-column>
                    <el-table-column label="更新时间" prop="updatetime"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <div class="caozuo">
                                <el-button type="danger" @click="shanchu(scope.row.id)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </div>
    </div>

    <el-dialog v-if="insertVisible" v-model="insertVisible">
        <router-view @closeDialog="closeDialog">
        </router-view>
    </el-dialog>
    <el-dialog v-if="detailVisible" v-model="detailVisible" title="盘点明细表" :width="auto">
        <router-view :transfer-id="selectedDetailId" @closeDialog="detailVisible = false">
        </router-view>
    </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import request from '@/api/request';
import { useRouter } from "vue-router";
import { CirclePlus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';


const insertVisible = ref(false)
const detailVisible = ref(false)
const selectedDetailId = ref('')
const router = useRouter();

const openDetails = (detailId) => {
    console.log('点击的调拨订单ID:', detailId);
    selectedDetailId.value = detailId;
    detailVisible.value = true;
    console.log('传递给明细表的detailId:', selectedDetailId.value);
    router.push("/warehouse/pandianmingxi/index")
}

function insert() {
    insertVisible.value = true
    router.push("/warehouse/pandian/insert");
}
const filters = ref({ id: '', countcode: '', warehouseid: '' });

const warehoseList = ref([]);

const loadwarehouses = () => {
    request({
        method: "get",
        url: "inventory/trees"
    }).then(res => {
        console.log(res.data);
        if (res.data) {
            warehoseList.value = res.data.data.map(item => ({
                id: item.countId,
                countcode: item.countCode,
                countname: item.countName,
                warehouseid: item.warehouseId,
                counttype: item.countType,
                plannedStarttime: new Date(item.plannedStartTime).toLocaleDateString(),
                actualStarttime: new Date(item.actualStartTime).toLocaleDateString(),
                actualendtime: new Date(item.actualEndTime).toLocaleDateString(),
                status: item.status,
                createby: item.createBy,
                createtime: new Date(item.createTime).toLocaleDateString(),
                updatetime: new Date(item.updateTime).toLocaleDateString()
            }));
        } else {
            console.error("查询失败:", res.message);
            ElMessage.error("查询失败:", +res.message)
        }
    }).catch(err => {
        console.error("请求异常:", err);
        ElMessage.error("加载失败:", err.message)
    });
};
onMounted(loadwarehouses);
const tabos = computed(() => {
    return warehoseList.value.filter(item => {
        const matchId = filters.value.id ? item.id.includes(filters.value.id) : true;
        const matchcountcode = filters.value.countcode ? item.countcode === filters.value.countcode : true;
        const matchwarehouseid = filters.value.warehouseid ? item.warehouseid === filters.value.warehouseid : true;
        return matchId && matchcountcode && matchwarehouseid;
    });
});

const resfrom = () => {
    filters.value = { id: "", countcode: "", warehouseid: "" }
    loadwarehouses();
};

const shanchu = (id) => {
    console.log("要删除的仓库id", id)
    ElMessageBox.confirm("确定删除该仓库", {
        title: '删除确定',
        confirmButtonText: '确定删除',
        cancelButtonText: '取消'
    })
        .then(() => {
            request({
                method: "delete",
                url: `/inventory/${id}`,
            })
                .then(res => {
                    if (res.data.success) {
                        ElMessage.success("删除成功");
                        loadwarehouses();
                    } else {
                        console.error('删除失败:', res.message)
                        ElMessage.error(`删除失败:${res.message}`);
                    }
                })
                .catch(err => {
                    console.error('删除异常:', err);
                    ElMessage.error(`删除失败:${err.message || '网络异常'}`)
                })
        })
        .catch(() => {
            ElMessage.info("已取消")
        });
};
const closeDialog = () => {
    insertVisible.value = false;
};
</script>

<style scoped>
.nmb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
    padding: 10px 0;
}

.nmbs {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 280px;
    gap: 10px
}

.nmb span {
    width: 100px;
    text-align: right;
}

.filter-input {
    flex: 1;
    min-width: 180px;
}


.reset-btn {
    margin-left: 10px;
    white-space: nowrap;
}

.a {
    margin-bottom: 20px;
}

.clickable-id {
    color: #409eff;
    cursor: pointer;
    text-decoration: underline;
}

.clickable-id:hover {
    color: #66b1ff;
}
</style>
